<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image':`url(${songDetall.al.picUrl})`}">
			
			
		</view>
		<hand :title="songDetall.name" :icon='true' color='white'></hand>
		<view class="container" v-show="!isloading">
		<scroll-view scroll-y="true"  >
			<view class="detail-play" @tap="headToPlay">
				<image :src="songDetall.al.picUrl" :class="{'detail-play-run':isPlayRotate}" mode=""></image>
				<text class="iconfont"  :class="iconplay"  ></text>
				
				<view class="detail-play-yaogan" :class=" isPlayRotate?'guiwei':''"></view>
		
				
			</view>
			<view class="detail-lyric">
				<view class="detail-lyric-wrap" :style="{transform: 'translateY('+ -(lyricIndex-1)*82+'rpx)'}" >
					<view v-for="(item,index) in songLyric" :key="index" class="detail-lyric-item" :class="{active:lyricIndex==index}" >{{item.lyric}}</view>
				
				
				</view>
			</view>
			<view class="detail-like">
				<view class="detail-like-head">
					喜欢这首歌的人也听
				</view>
				<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index" @tap="headToSimi(item.id)">
					<view class="detail-like-img">
						<image :src="item.album.picUrl" mode=""></image>
					</view>
					<view class="detail-like-song">
						<view >{{item.name}}</view>
						<view>
							<text class="detail-like-song-img sq"></text> 
							{{item.album.artists[0].name}}-{{item.name}}
						</view>
					</view>
					<text class="iconfont icon-bofang"></text>
				</view>
				
			</view>
		<view class="detail-comment">
			<view class="detail-comment-head">精彩评论</view>
			<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
				<view class="detail-comment-img">
					<image :src="item.user.avatarUrl" mode=""></image>
					
				</view>
				<view class="detail-comment-comtent">
					<view class="detail-comment-title">
						<view class="detail-comment-name">
							<view >{{item.user.nickname}}</view>
							<view >{{item.time|formatTime}}</view>
							
						</view>
						<view class="detail-comment-like">{{item.likedCount|formaCount}} <text class="iconfont icon-dianzan"></text>
							
						</view>
						
					</view>
					<view class="detail-comment-text">
						{{item.content}}
						
					</view>
				</view>
				
			</view>
			
		</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css'
	import hand from "../../components/miuschead/miuschead.vue"
	import { apis } from "../../common/api.js"
	// import  geci from "../../common/geci/geci.js"
	
	export default {
		data() {
			return {
				songDetall:{
					al:{
						picUrl:''
					}
				},
				songSimi:[],
				songComment:[],
				songLyric:[], //歌词
				lyricIndex:0,
				// bgAudioMannager:[],
				iconplay:'icon-zanting',
				isPlayRotate:true,
				isloading:true,
				
			}
		},
		onLoad(optionns) {
			this.getMusic(optionns.songid)
		
		},
		onUnload() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioMannager.destroy()
			// #endif
			
		},
		onHide() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioMannager.destroy()
			// #endif
		
		},
		components:{
			hand
		},
		methods: {
			getMusic(songId){
				this.$store.commit('NEXT_ID',songId)
				uni.showLoading({
					title:'加载中...'
				})
				this.isloading=true
				Promise.all([apis.songDetail(songId),apis.songSimi(songId),apis.songComment(songId),apis.songLyric(songId),apis.songUrl(songId)]).then((res)=>{
					// console.log('quanbu1',res);
					if(res[0][1].data.code=='200'){
					
						this.songDetall=res[0][1].data.songs[0];
					
					}
					if(res[1][1].data.code=='200'){
						
						this.songSimi=res[1][1].data.songs
						
					}
					if(res[2][1].data.code=='200'){
						this.songComment=res[2][1].data.hotComments
						
					}
					if(res[3][1].data.code=='200'){
						let lrc=res[3][1].data.lrc.lyric
						// 正则表达式
						let re=/\[([^\]]+)\]([^\[]+)/g;
						var result=[];
						lrc.replace(re,($0,$1,$2)=>{
							result.push({'time':this.formatTimeTosec($1),"lyric":$2});
						});
						
						
					
						this.songLyric=result
					
					if (res[4][1].data.code=='200') {
						// #ifdef MP-WEIXIN
						this.bgAudioMannager=uni.getBackgroundAudioManager();
						
						this.bgAudioMannager.title=this.songDetall.name; //名字
						
						// #endif
						// #ifdef H5
						if(!this.bgAudioMannager){
							this.bgAudioMannager=uni.createInnerAudioContext()
						}
						
								
								this.iconplay='icon-bofang'
								this.isPlayRotate=false
						// #endif
			
				
						this.bgAudioMannager.src=res[4][1].data.data[0].url||'';
						this.listenLyricIndex();
						this.bgAudioMannager.onPlay(()=>{
							this.iconplay='icon-zanting'
							this.isPlayRotate=true
							this.listenLyricIndex()
						})
						this.bgAudioMannager.onPause(()=>{
							this.iconplay='icon-bofang'
							this.isPlayRotate=false
							this.cancelLyricIndex()
						})
						this.bgAudioMannager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId)
						})
					
					}	
							// console.log(lrc.match(re));
						
					}
				this.isloading=false
				uni.hideLoading()
					
				});
				
			// apis.songLyric(songId).then((res=>{
			// 	console.log(res);
			// }))
			},
			formatTimeTosec(value){
				let arr=value.split(':')
				
				return (Number(arr[0]*60)+Number(arr[1])).toFixed(1)
			},
			 
			headToPlay(){
				if (this.bgAudioMannager.paused) { //监听函数自带的this.bgAudioMannager.paused
					this.bgAudioMannager.play()
				} else{
					this.bgAudioMannager.pause()
				}
			},
	
			
			
			
			//歌词监听
			listenLyricIndex(){
				clearInterval(this.timer)
				this.timer=setInterval(()=>{
					
					for (var i = 0; i < this.songLyric.length; i++) {
						if(this.bgAudioMannager.currentTime>this.songLyric[this.songLyric.length-1].time){
							this.lyricIndex=this.songLyric.length-1;
							break;
						}
						if (this.bgAudioMannager.currentTime>this.songLyric[i].time&&this.bgAudioMannager.currentTime<this.songLyric[i+1].time) {
							this.lyricIndex=i
						} 
						
					}
			
					console.log(this.lyricIndex);
				},500)
				
			},
			cancelLyricIndex(){
				clearInterval(this.timer)
			},
			headToSimi(songId){
				this.getMusic(songId)
			}
			
			
			
		}
		
	}
</script>

<style scoped>
.detail-play{
	width: 580rpx;
	height: 580rpx;
	    background-image: url('https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200');
	    background-size: contain;
	/* background-size: cover; */
	margin: 214rpx auto 0;
	position: relative;
}
.detail-play image{
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	right:0;
	bottom: 0;
	margin:  auto;
	animation: 10s linear  move infinite;
	animation-play-state: paused;
	
	
}
.detail-play .detail-play-run{	animation-play-state: running;}
@keyframes move{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.detail-play text{font-size: 100rpx; color: #fff;position: absolute;
width: 100rpx;
height: 100rpx;
	left: 0;
	top: 0;
	right:0;
	bottom: 0;
	margin: auto;}
.detail-play-yaogan{
	    width: 245rpx;
	    height: 400rpx;
	background-image: url(~@/static/gun.png);
		position: absolute;
		left: 260rpx;
		top: -215rpx;
		margin: auto;
		background-size: cover;
		 transform-origin:40rpx 0;
	transform: rotate(-20deg);
	  transition: transform 1s;
		
}
.guiwei{
  transform: rotate(0deg);
}
.detail-lyric{ font-size: 32rpx; line-height: 82rpx; height: 246rpx; text-align: center; overflow: hidden; color: #6f6e73;}
.detail-lyric-wrap{ transition: .2s; }
.detail-lyric-item{ height: 82rpx; }
.detail-lyric-item.active{color: #fff;}
.detail-like{margin: 0 30rpx;}
.detail-like-head{font-size: 36rpx; color: #fff; margin: 50rpx 0; }
.detail-like-item{ display: flex; align-items: center; margin-bottom: 28rpx;}
.detail-like-img{width: 82rpx; height: 82rpx; border-radius: 20rpx; overflow: hidden; margin-right: 20rpx;}
.detail-like-img image{width: 100%; height: 100%;}
.detail-like-song{flex: 1; color: #c6c2bf;}
.detail-like-song view:nth-child(1){font-size: 28rpx; color: #fff; margin-bottom: 12rpx;}
.detail-like-song view:nth-child(2){font-size: 22rpx;  }
.detail-like-song-img{width: 28rpx; height: 20rpx; margin-right: 10rpx;  display: inline-block;  background-size: 164px 154px; }
.detail-like-item text{ font-size: 50rpx; color: #c6c2bf;}
.detail-comment{margin: 0 30rpx;}
.detail-comment-head{font-size: 36rpx; color: #fff; margin: 50rpx 0;}
.detail-comment-item{margin-bottom: 28rpx; display: flex;}
.detail-comment-img{width: 64rpx; height: 64rpx; border-radius: 50%; overflow: hidden; margin-right: 18rpx;}
.detail-comment-img image{
	width: 100%; height: 100%;
}
.detail-comment-comtent{flex: 1; color: #cbcacf;}
.detail-comment-title{display: flex;justify-content:space-between;}
.detail-comment-name{}
.detail-comment-name view:nth-child(1){font-size: 26rpx;}
.detail-comment-name view:nth-child(2){font-size: 20rpx;}
.detail-comment-like{font-size: 28rpx;}
.detail-comment-text{font-size: 28rpx;line-height: 40rpx;color: #fff; margin-top: 20rpx; border-bottom: 1px solid #e0e0e0; padding-bottom: 40rpx;}

</style>
